<template>
	<view class="body">
		<input type="text" password class="uni-input common-input" placeholder="输入旧密码" placeholder-class="password" v-model="oldpassword">
		<input type="text" password class="uni-input common-input" placeholder="输入新密码" placeholder-class="password"  v-model="newpassword">
		<input type="text"  password class="uni-input common-input" placeholder="输入确认密码" placeholder-class="password" v-model="renewpassword">
		<button type="primary" class="user-set-btn" hover-class="exit-hover" :class="{'user-set-btn-disabled': disabled}" @tap="submit" :disabled="disabled">完成</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldpassword:"",
				newpassword:"",
				renewpassword:"",
				disabled:true
			}
		},
		methods: {
			submit(){
				if(!this.check()){return ;}
				uni.showToast({
					title:"验证通过",
					icon:"success",
					duration:1500
				})
			},
			check(){
				if(!this.oldpassword || this.oldpassword==""){
					uni.showToast({
						title:"旧密码不能为空",
						icon:"none"
					})
					return false;
				}
				if(!this.newpassword || this.newpassword==""){
					uni.showToast({
						title:"新密码不能为空",
						icon:"none"
					})
					return false;
				}
				if(!this.renewpassword || this.renewpassword==""){
					uni.showToast({
						title:"确认密码不能为空",
						icon:"none"
					})
					return false;
				}
				if(this.renewpassword != this.newpassword){
					uni.showToast({
						title:"新密码与确认密码不一致",
						icon:"none"
					})
					return false
				}
				return true;
				
			},
			change(){
				if(this.oldpassword && this.newpassword && this.renewpassword){
					this.disabled = false
					return ;
				}
				this.disabled = true
			}
		},
		watch:{
			oldpassword(val){
				this.change()
			},
			newpassword(val){
				this.change()
			},
			renewpassword(val){
				this.change()
			}
		},
		// 监听页面返回
		onBackPress(){
			uni.hideKeyboard()
		}
	}
</script>

<style>
	@import "../../common/form.css";
	
	.password {
		font-size: 32upx;
	}
	.exit-hover {
		background: #DECE4B!important;
	}
</style>
